<script setup>
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const active = ref(route.path)

const getAssetsImage = name => {
	if (import.meta && import.meta.url) {
		return new URL(`/src/assets/${name}`, import.meta.url).href
	} else {
		return ''
	}
}
let child = localStorage.getItem('menu_child')
let children = JSON.parse(child) || []
// try {
//   var children = JSON.parse(child)
// } catch {
//   var children = []
// }
const menu = ref(children);

watch(
	() => route.matched[1],
	(newValue, oldValue) => {
		child = localStorage.getItem('menu_child')
		try {
			children = JSON.parse(child)
		} catch {
			children = []
		}
		menu.value = children
		active.value = route.path
	}
)
</script>
<template>
	<el-container>
		<el-aside>
			<el-menu router :default-active="active" active-text-color="rgb(102,136,226)">
				<template v-for="(item, i) in menu" :key="i">
					<el-sub-menu v-if="item.children && item.children.length > 0" :index="i + ''">
						<template #title>
							<img :src="getAssetsImage(item.icon)" class="menu-img" />
							<p>{{ item.title }}</p>
							<!-- <el-link :underline="false">{{ item.title }}</el-link> -->
							<!-- <span v-if="typeof item.num != 'undefined'"
  >({{ item.num }})</span
>-->
						</template>
						<el-menu-item v-for="(it, j) in item.children" :key="j" :index="it.url">{{
							it.title
						}}
						</el-menu-item>
					</el-sub-menu>
					<el-menu-item v-else :index="item.url">
						<template #title>
							<img :src="getAssetsImage(item.icon)" class="menu-img" />
							<p>{{ item.title }}</p>
							<!-- <el-link :underline="false">{{ item.title }}</el-link> -->
							<!-- <span v-if="typeof item.num != 'undefined'">({{ item.num }})</span> -->
						</template>
					</el-menu-item>
				</template>
			</el-menu>
		</el-aside>
		<el-main style="padding:15px">
			<router-view></router-view>
		</el-main>
	</el-container>
</template>
<style lang="scss" scoped>
.el-main {
	padding: 0;
	height: 100%;
}

.el-aside {
	height: calc(100vh - 80px);
}

.el-menu {
	height: 100%;
	background-color: rgb(231, 233, 236);
}

// .el-sub-menu {
//     .el-sub-menu__title {
//         max-height: 40px;
//     }
// }

.el-menu-item,
.el-sub-menu {
	background-color: rgb(231, 233, 236);
	// height: 40px;
	line-height: 40px;

	.menu-img {
		width: 15px;
		height: 15px;
	}

	p {
		margin: 0 10px;
	}

	span {
		color: rgb(64, 108, 224);
	}
}

.el-sub-menu {
	.el-menu-item {
		// padding:0 !important;
		width: 100%;
	}
}

.el-menu-item.is-active {
	background-color: rgb(196, 198, 200);
	font-weight: bold;
}

.el-menu-item {
	height: 40px;
}
</style>
<style>
.el-sub-menu__title {
	height: 40px;
	line-height: 40px;
}
</style>